<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: auto;
				padding: 0px;
				font-family: "楷书";
			}
			
			#main {
				width: 400px;
				height: 550px;
				background-image: url(img/beijing.jpg);
				position: relative;
				/*display: none;*/
			}
			
			#main .top {
				background-color: #23A7EF;
				height: 50px;
				font-size: 22px;
				line-height: 50px;
				text-align: center;
				font-weight: bolder;
				color: white;
			}
			.nicheng {
				position: absolute;
				top: 20%;
				left: 25%;
				color: white;
				font-weight: bolder;
			}
			.zh {
				position: absolute;
				top: 30%;
				left: 25%;
				color: white;
				font-weight: bolder;
			}
			
			.mm {
				position: absolute;
				top: 40%;
				left: 25%;
				color: white;
				font-weight: bolder;
			}
			
			#login {
				cursor: pointer;
				margin-top: 350px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				font-weight: bolder;
			}
			
			#register {
				cursor: pointer;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				font-weight: bolder;
			}
			
			#register:hover,
			#login:hover {
				transition: 2s;
				color: #9E9FA1;
				background-color: #FE8400;
			}
			
			#myChat {
				border: 1px solid;
				width: 400px;
				height: 550px;
				display: none;
			}
			
			#myname {
				color: gold;
				margin: 0px 10px;
			}
			
			#targetname {
				color: blue;
				font-weight: bolder;
				margin: 0px 10px;
			}
			
			.myChat_top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #88CAE5;
				color: gray;
				font-weight: bold;
			}
			
			#myChat .content {
				background-color: #EEEEEE;
				height: 80%;
				overflow: auto;
			}
			
			#loginOut {
				cursor: pointer;
				border: 0px;
				font-size: 12px;
				border-radius: 5px;
				padding: 3px 3px;
				margin-left: 10px;
				color: gray;
				transition: 1s;
			}
			
			#loginOut:hover {
				font-size: 16px;
			}
			
			#myChat ul {
				list-style-type: none;
				height: 435px;
				overflow: auto;
			}
			
			#myChat ul li {
				height: 60px;
			}
			
			#myChat .content .left {
				float: left;
				margin-top: 10px;
				margin-left: 10px;
				background-color: white;
				padding: 10px 20px;
				font-size: 14px;
				border-radius: 3px;
			}
			
			#myChat .content .right {
				float: right;
				margin-top: 10px;
				background-color: #B2E281;
				padding: 10px 20px;
				font-size: 14px;
				border-radius: 3px;
				margin-right: 10px;
			}
			
			#sendtxt {
				margin-top: 13px;
			}
			
			#send {
				border-radius: 5px;
				cursor: pointer;
				border: 0px;
				color: #3E4B53;
				font-size: 14px;
				font-weight: bolder;
				float: right;
				margin-top: 12px;
				width: 55px;
				height: 43px;
			}
			
			#send:hover {
				transition: 1s;
				background-color: #000;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<p class="top">登录</p>
			<p class="nicheng">昵称： <input type="text" id="nicheng" /></p>
			<p class="zh">账号： <input type="text" id="yhm" /></p>
			<p class="mm">密码： <input type="password" id="mm" /></p>
			<p id="login"> 登录</p>
			<p id="register" onclick="location.href='register.html'">新用户注册</p>
		</div>

		<div id="myChat">
			<p class="myChat_top">账号：<span id="myname"></span>与<input type="text" id="targetname" />聊天<button id="loginOut">退出</button></p>
			<div class="content">
				<ul>
				</ul>
			</div>
			<div class="footer">
				<p><textarea id="sendtxt" rows="1" cols="40"></textarea><button id="send">发送</button></p>
			</div>
		</div>
	</body>
	<script src="js/jmessage-sdk-web-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery1.11.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var sendtxt;
		var nowName;
		var whoName;
		$("#login").click(function() {
				login();
			})
			//发送
		$("#send").click(function() {
			send()
		})

		//退出登录
		$("#loginOut").click(function() {
				JIM.loginOut();
				$("#myChat").hide();
				$("#main").show();
			})
			//登录
		function login() {
			JIM.login({
				'username': $("#yhm").val(),
				'password': $("#mm").val()
			}).onSuccess(function(data) {
				console.log("登录成功")
				nicheng()
				$("#main").hide();
				getUserInfo();
				jianting();
			}).onFail(function(data) {
				alert("登录失败")
			});
		}
		//昵称
		function nicheng(){
			 JIM.updateSelfInfo({
                'nick_name' : $("#nicheng").val()
               }).onSuccess(function(data) {
                  // do something
               }).onFail(function(data) {
                  // do something
               });
		}
		//监听
		function jianting() {
			JIM.onMsgReceive(function(data) {
				var content = data.messages[0].content.msg_body.text;
				var form_name = data.messages[0].content.from_name;
				console.log('receive msg: ' + JSON.stringify(data));
				$(".content ul").append("<li><span class='left'>" + form_name + " : " + content + "</span></li>");
				console.log(data);
			});
		}
		//获取登录账号
		function getUserInfo() {
			nowName = JIM.current_user
			JIM.getUserInfo({
				'username': nowName,
				'appkey': '4104e6c1cb3a78e9d2e789cb'
			}).onSuccess(function(data) {
				$("#myChat").show();
				$("#myname").html(nowName)
				console.log(nowName)

			}).onFail(function(data) {
				// do something
			});
		}

		function send() {
			sendtxt = $("#sendtxt").val();
			JIM.sendSingleMsg({
				'target_username': $("#targetname").val(),
				'content': sendtxt,
				'appkey': '4104e6c1cb3a78e9d2e789cb',
				'extras': false
			}).onSuccess(function(data) {
				$(".content ul").append("<li ><span class='right'>" + sendtxt + "</span></li>")
				$("#sendtxt").val("");
			}).onFail(function(data) {
				// do something
			});
		}
	</script>

</html>